<template>
  <view class="container">
    <view class="container-body">
      <view class="container-body-info">
        <view class="container-body-info-item full-width">
          <view class="container-body-info-item-label">房源：</view>
          <view class="container-body-info-item-value">{{ data.premisesAddress }}</view>
        </view>
        <view class="container-body-info-item full-width">
          <view class="container-body-info-item-label">检查点：</view>
          <view class="container-body-info-item-value">{{ data.processName ? data.processName : '--' }}</view>
        </view>
        <view class="container-body-info-item full-width">
          <view class="container-body-info-item-label">类型：</view>
          <view class="container-body-info-item-value">
            {{ housePictureTypeMap[data.housePictureType] ? housePictureTypeMap[data.housePictureType] : '--' }}
          </view>
        </view>
        <view class="container-body-info-item full-width">
          <view class="container-body-info-item-label">状态：</view>
          <view class="container-body-info-item-value">
            {{ facilitiesStateMap[data.facilitiesState] ? facilitiesStateMap[data.facilitiesState] : '--' }}
          </view>
        </view>
        <view class="container-body-info-item full-width">
          <view class="container-body-info-item-label">图片：</view>
          <view class="container-body-info-item-value">{{ data.fullAddress }}</view>
          <view class="container-body-info-item-img">
            <view class="container-body-info-item-img-item" v-for="(item, index) in pictureSetList" :key="item">
              <image :src="item" mode="aspectFill" @click="showPhoto(index, pictureSetList)" />
            </view>
          </view>
        </view>
        <view class="container-body-info-item full-width">
          <view class="container-body-info-item-label">备注：</view>
          <view class="container-body-info-item-value">
            {{ data.remark ? data.remark : '--' }}
          </view>
        </view>
        <view class="container-body-info-item full-width">
          <view class="container-body-info-item-label">上传时间：</view>
          <view class="container-body-info-item-value">
            {{ data.createTime ? data.createTime : '--' }}
          </view>
        </view>
        <view class="container-body-info-item">
          <view class="container-body-info-item-label">上传人：</view>
          <view class="container-body-info-item-value">
            {{ data.uploadUser ? data.uploadUser : '--' }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {getDailyInspectionDetail} from "@/api/manager/daily-inspection";

export default {
  components: {},
  data() {
    return {
      data: {},
      // 相册类型映射
      housePictureTypeMap: {
        '1': '验房',
        '2': '清洁打扫',
        '3': '保洁',
        '4': '报修',
        '5': '看房',
        '6': '日常检查'
      },
      // 设备状态
      facilitiesStateMap: {
        "1": "正常",
        "2": "已损坏"
      },
    };
  },
  onLoad(options) {
    if (options.housePictureId) {
      this.housePictureId = options.housePictureId
      this.getDetail()
    }
  },
  computed: {
    picStrToArr() {
      return (value) => {
        return value?Array.isArray(value)?value:value.split(','):[]
      }
    },
    pictureSetList(){
      return this.data.pictureSet?this.data.pictureSet.split(','):[]
    }
  },
  methods: {
    getDetail() {
      getDailyInspectionDetail(this.housePictureId).then(res => {
        this.data = res.data
      })
    },
    // 展示图片
    showPhoto(index, list) {
      console.log('index:', index, 'list:', list)
      // 预览大图
      uni.previewImage({
        current: index,
        urls: list,
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.container {
  background: #ffffff;
  padding: 20px;

  .container-body {
    .container-body-info {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 20px;

      .container-body-info-item {
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: 24rpx;
        color: #343434;

        &.full-width {
          grid-column: 1 / -1;
        }

        .container-body-info-item-label {
          min-width: 80rpx;
        }

        .container-body-info-item-value {
        }

        .container-body-info-item-img {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(50rpx, 1fr));
          grid-gap: 10rpx;
          width: 100%;
          .container-body-info-item-img-item {
            width: 100%;
            height: 50rpx;
            image {
              width: 100%;
              height: 50rpx;
            }
          }
        }
      }
    }
  }

}

</style>
